<script setup>
import { reactive, watch } from "vue";
import ZutaiBasic from "./zutaiBasic.vue";
import ZutaiPopup from "./zutaiPopup.vue";

const props = defineProps({
  dftPage: {
    type: Number,
    required: true,
  },
  showFunc: {
    type: Boolean,
    default: false,
  },
  disabled: {
    type: Boolean,
    default: true,
  },
  reload: {
    type: Number,
    default: 0,
  }
});

const emits = defineEmits(['change']);

const zPopup = reactive({
  visible: false,
  popupID: null,
  fnc: '弹出画面',
  prefix: '',
  title: '',
});

const change = (id) => {
  emits('change', id);
}
</script>


<template>
  <ZutaiBasic
    :dftPage="props.dftPage"
    :showFunc="props.showFunc"
    :reload="props.reload"
    :disabled="props.disabled"
    @setPageID="change"
    @setPopupID="e => zPopup.popupID = e"
    @setVisible="e => zPopup.visible = e"
    @setPageFnc="e => zPopup.fnc = e"
    @setPagePrefix="e => zPopup.prefix = e"
    @setPageTitle="e => zPopup.title = e"
    v-if="props.dftPage"
  />
  
  <div class="pop-box">
    <el-dialog
      class="dex-dialog"
      v-model="zPopup.visible"
      :show-close="false"
      :destroy-on-close="true"
      :center="true"
      :draggable="true"
      width="fit-content"
    >
      <ZutaiPopup :zPopup="zPopup" :disabled="props.disabled" />
    </el-dialog>
  </div>
  
</template>

<style lang="scss" scoped>
.pop-box {
  /* 必须div包裹一下:deep(.el-dialog) 才有效 */
}
</style>
<style scoped>
:deep(.dex-dialog.el-dialog) {
  background: transparent;
  padding: 0;
}
:deep(.dex-dialog.el-dialog >header) {
  display: none !important;
}
</style>
